/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */

import React from 'react';
import type {PropsWithChildren} from 'react';
import {useState} from 'react'
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
  Button,
  FlatList,
  TouchableOpacity,
  TextInput,
  Alert
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';


// const todos = [];
const COLORS = {primary: '#1f145c', white: '#fff'};
type SectionProps = PropsWithChildren<{
  title: string;
}>;

function App(): JSX.Element {

  const [textInput, setTextInput] = React.useState('');
  const [todos, setTodos] = React.useState([]);
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  const toggleCheck = (index: any) => {
    const _list = [...list];
    _list[index].finish = !_list[index].finish;
    setList(_list);
  };
  const delHandle = (index: any) => {
    const _list = [...list];
    _list.splice(index, 1);
    setList(_list);
  };

  const addTodo = () => {
    if (textInput === '') {
      Alert.alert('啊哈', '請輸入文字');
    } else {
      const newTodo = {
        id: Math.random(),
        task: textInput,
        completed: false,
        time: new Date(),
      };
      setTextInput('');
    }
  };

  const [list, setList] = useState<Array<{text: String; finish: Boolean}>>([
    {
      text: '吃臭豆腐',
      finish: true,
    },
    {
      text: '吃火锅',
      finish: false,
    },
    {
      text: '吃烤猪蹄',
      finish: false,
    },
    {
      text: '吃榴莲',
      finish: false,
    },
  ]);


  return (
    <SafeAreaView 
      style={{
        flex: 1,
        backgroundColor: 'skyblue'
      }}>
      <View style={styles.header}>
        <Text
          style={{
            fontWeight: 'bold',
            fontSize: 20,
            color: COLORS.primary
          }}>
          TODO LIST
        </Text>
        <Button
          title="清空"
          // onPress={clearAllTodos}
        />
      </View>
      <ScrollView>
        {list.map((item, index) => {
          return (
            <View style={styles.listWrap} key={index}>
              <TouchableOpacity onPress={() => toggleCheck(index)}>
                <Button title="编辑" color="#f194ff" />
              </TouchableOpacity>
              <Text
                style={[styles.listText, item.finish && styles.finished]}>
                {item.text}
              </Text>
              <TouchableOpacity onPress={() => delHandle(index)}>
                <Button title="删除"/>
              </TouchableOpacity>
            </View>
          );
        })}
      </ScrollView>
      <View style={styles.footer}>
        <View style={styles.inputContainer}>
          <TextInput
            value={textInput}
            placeholder="Add Todo"
            // onChangeText={text => setTextInput(text)}
          />
        </View>
        <TouchableOpacity onPress={addTodo}>
          <Button title="添加"/>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  listItem: {
    padding: 20,
    backgroundColor: COLORS.white,
    flexDirection: 'row',
    elevation: 12,
    borderRadius: 7,
    marginVertical: 10,
  },
  header: {
    padding: 20,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  delete: {
    width: 10,
    height: 10
  },
  listWrap: {
    flexDirection: 'row',
    alignContent: 'center',
    paddingTop: 6,
    paddingBottom: 6,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    marginBottom: 6,
    padding: 6,
  },
  finished: {
    textDecorationLine: 'line-through',
  },
  listText: {
    flex: 1,
    fontSize: 16,
  },
  footer: {
    position: 'absolute',
    bottom: 0,
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 20,
    backgroundColor: COLORS.white,
  },
  inputContainer: {
    height: 50,
    paddingHorizontal: 20,
    elevation: 40,
    backgroundColor: COLORS.white,
    flex: 1,
    marginVertical: 20,
    marginRight: 20,
    borderRadius: 30,
  },
});

export default App;
